<template>
  <div class="base">
    <p>--------ref------</p>
    <input type="text" v-model="message">
    <p><button @click="reverse">Reverse Message</button></p>
    <p><button @click="message = message + '!'">Append "!"</button></p>
    <p><a href="http://www.baidu.com" @click.prevent="notify">A link with e.preventDefault()</a></p>
    <p :class="isRed ? 'red' : 'blue'" @click="changeBgColor"><span class="inRed">This should</span> be red... but click me to toggle it. haha</p>
    <p>---------reactive-------</p>
    <div>
      <p>{{obj1.age}} {{obj2.age}}</p>
      <button @click="submit">reactive</button>
    </div>
    <p>--------列表循环------</p>
    <p>
      <button @click="isShowList=!isShowList">toggleList</button>
      <button @click="list.push(list.length + 1)">pushNumber</button>
      <button @click="list.pop()">popNumber</button>
      <button @click="list.reverse()">reverseList</button>
    </p>
    <ul v-if="isShowList">
      <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
    <p>---------表单-------</p>
    <p><input type="text" v-model="textInput" />{{ textInput }}</p>
    <p><input type="checkbox" id="checkboxInput" v-model="checkboxInput"><label for="checkboxInput">checked {{
    checkboxInput }}</label></p>
    <div>
      <input type="checkbox" id="jack" value="jack" v-model="checkboxInputMultip"><label for="jack">jack</label>
      <input type="checkbox" id="john" value="john" v-model="checkboxInputMultip"><label for="john">john</label>
      <input type="checkbox" id="mike" value="mike" v-model="checkboxInputMultip"><label for="mike">mike</label>
      <p>checkboxInputMultip
      <pre>{{checkboxInputMultip}}</pre>
      </p>
    </div>
    <div>
      <input type="radio" name="" id="one" value="one" v-model="radioInput"><label for="one">one</label>
      <input type="radio" name="" id="two" value="two" v-model="radioInput"><label for="two">two</label>
      <pre>radioInput {{radioInput}}</pre>
    </div>
    <div>
      <select name="" id="" v-model="selected">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <p>
      <pre>selected {{selected}}</pre>
      </p>
    </div>
    <div>
      <select name="" id="" v-model="multipleSelected" multiple>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
      </select>
      <p>
      <pre>multipleSelected {{multipleSelected}}</pre>
      </p>
    </div>
    <p>---------组件props emit-------</p>
    <div>
      <ul>
        <TodoItem ref="todoItemRef" v-for="item in todoList" :todo="item" :key="item" @remove="removeItem(item)"
          :listTitle="listTitle">
          我是插槽
          <template #abc>我是具名插槽abc</template>
        </TodoItem>
      </ul>
    </div>
    <p>---------watch-------</p>
    <div>
      <input type="text" v-model="w1.name">
      <input type="text" v-model="w2.name">
      <button @click="stopWatch">停止watch</button>
    </div>
    <p>---------nextTick-------</p>
    <div>
      <div ref="tickDiv">{{tickMessage}}</div>
      <button @click="changeTickMessage">changeTickMessage</button>
    </div>
  </div>
</template>

<script setup>
import { ref, isRef, nextTick, provide, reactive, getCurrentInstance, computed, watch, watchEffect, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUpdated, onUnmounted } from 'vue'
import TodoItem from '../components/TodoItem.vue'
// 获取定义在main.js里的全局变量
// console.log(getCurrentInstance()?.appContext.config.globalProperties.$env)
// ref
const message = ref('Hello World')
const reverse = () => {
  message.value = message.value.split('').reverse().join('')
}
const notify = () => {
  alert('e.preventDefault()')
}
const isRed = ref(true)
const changeBgColor = () => {
  isRed.value = !isRed.value
}
// reactive 只支持引用类型 不需要.value 不能直接赋值 proxy实现
// ref 支持所有类型 需要.value 能直接赋值 defineProperty实现 相当于reactive({value: aaa})
let obj1 = reactive({ age: 3 })
let obj2 = ref({ age: 33 })
const submit = () => {
  // 不能直接赋值 这种不会触发界面更新
  obj1 = { age: 4 }
  // 而ref可以
  obj2.value = { age: 44 }
  // 这种才会触发界面更新
  // obj1.age = 4
  console.log(obj1, obj2)
}
// 列表循环
const isShowList = ref(true)
const list = ref([1, 2])
// 表单
const textInput = ref('edit me')
const checkboxInput = ref(true)
const checkboxInputMultip = ref(['jack'])
const radioInput = ref('one')
const selected = ref('B')
const multipleSelected = ref(['A', 'B'])
// 组件props emit
const todoList = ref(['aaaa', 'bbbb', 'cccc', 'dddd'])
const removeItem = (item) => {
  todoList.value = todoList.value.filter(a => a !== item)
}
const listTitle = ref('我是标题')
// dom ref
const todoItemRef = ref(null)
onMounted(() => {
  console.log(todoItemRef.value[0]['aaa']);
})
// watch
const w1 = ref({ name: '' })
const w2 = ref({ name: '' })
const myWatch1 = watch([w1, w2], (newValue, oldValue) => {
  console.log('newValue', newValue, 'oldValue', oldValue)
}, {
  // 深层监听 如果是reactive写不写都可以深层监听
  deep: true,
  // 页面刷新就监听
  immediate: true
})
const myWatch2 = watchEffect((onBefore) => {
  // 只要w1.value.name变化就会触发watchEffect
  console.log('w1', w1.value.name)
  // watch之前触发
  onBefore(() => {
    console.log('before watch')
  })
}, {
  // 默认就是deep: true immediate: true
  // dom更新后再触发watch
  flush: 'post'
})
// 如果执行 就会停掉对应watch
const stopWatch = () => {
  myWatch1()
  myWatch2()
}
// 生命周期
// onBeforeMount(() => console.log('onBeforeMount'))
// onMounted(() => console.log('onMounted'))
// onBeforeUpdate(() => console.log('onBeforeUpdate'))
// onUpdated(() => console.log('onUpdated'))
// onBeforeUnmount(() => console.log('onBeforeUnmount'))
// onUnmounted(() => console.log('onUnmounted'))
// provide inject
const location = ref('North Pole')
const updateLocation = () => {
  location.value = 'South Pole'
}
provide('locationFromBase', {
  location,
  updateLocation
})
// nextTick
const tickMessage = ref('我是nextTick更新前前前前')
const tickDiv = ref(null)
const changeTickMessage = async () => {
  tickMessage.value = '我是nextTick更新后后后后'
  await nextTick()
  console.log(tickDiv.value?.innerText)
}
// 新建.env.development .env.production 配置 VITE_API_URL
// package.json中 --mode development production
// npm run xx后得到不同的VITE_API_URL 代码中通过 import.meta.env.VITE_API_URL 读取
console.log(import.meta.env.VITE_API_URL)
</script>

<style lang="less" scoped>
.red {
  .inRed {
    color: #fac;
  }

  ;
  color: red;
}

.blue {
  color: blue;
}
</style>
